import styled from 'styled-components'

export const HomeBox = styled.div`
    width:960px;
    margin:0 auto;
    overflow:hidden;
`
export const HomeLeft = styled.div`
    float:left;
    width:625px;
    padding-top:30px;
    margin-left:15px;
    .img-banner{
        width:100%;
        height:270px;
    }
`
export const TopicBox = styled.div`
    overflow:hidden;
    padding:20px 0 10px 0 
    margin-left:-18px;
    border-bottom:1px solid #dcdcdc;
`
export const TopicItem = styled.div`
    float:left;
    height:32px;
    line-height:32px;
    margin-left:18px;
    border:1px solid #dcdcdc;
    background:#f7f7f7;
    border-radius:4px;
    font-size:14px;
    padding-right:10px;
    
    margin-bottom:15px;
    .title{
        color:#333;
        margin-left:10px;
    }
    .img-topic{
        display:block;
        width:32px;
        height:32px;
        float:left;
        margin-rignt:10px;
        float:left;
    }
`
export const ListItem = styled.div`
    overflow:hidden;
    padding:20px 0
    border-bottom:1px solid #dcdcdc;
    .img-list{
        display:block;
        width:150px;
        height:100px;
        float:right;
    }
    .title{
        font-size:16px;
        font-weight:bold;
        padding-bottom:20px;
    }
    .content{
        line-height:20px;
        width:450px;
        font-size:14px;
        display:block;
    }
`

export const HomeRight = styled.div`
    float:right;
    width:280px;
    
`
export const RecommendBox = styled.div`
    width:280px;
    margin:30px 0;
`
export const RecommendItem = styled.div`
    width:100%;
    height:50px;
    background:url(${(props)=>props.imgSrc});
    background-size:contain;
`
export const DownloadBox = styled.div`
    width:278px;
    height:100px;
    border:1px solid #f0f0f0;
    .code-img{
        width:60px;
        height:60px;
        float:left;
        padding:20px 20px;
    }
    .download-content{
        margin-top:32px;
        .download-content-title{
            font-size:16px;
            font-weight:bold;
            margin-bottom:12px;
        }
        .download-content-desc{
            font-size:13px;
            color:#777;
        }
    }
`
export const WritingTop = styled.div`
    padding:30px 0;
    .left{
        float:left;
        color:#969696;
        font-size:14px;
    }
    .right{
        float:right;
        color:#969696;
        font-size:14px;
    }

`
export const WritingContent = styled.div`
    padding:20px 0;
    

`
export const WritingItem = styled.div`
    display:relative
    width:278px;
    height:80px;
    position:relative;
    overflow:hidden;
    .writing-img{
        
        float:left;
        margin-top:15px;
        width:50px;
        height:50px;
        border-radius:50%;
        padding:15px 10px;
        vertical-align: center;
    }
    .writing-content-center{
        float:left;
        margin-top:20px;
        .title{
            font-size:14px;
            margin-bottom:15px;
        }
        .content{
            font-size:12px;
            color:#969696;
        }
    }
    .writing-content-right{
       position:absolute;
        font-size:12px;
        position:absolute;
        top:20px;
        right:10px;
        color:#42c02e;
    }
`
export const WritingBottom = styled.div`
    padding:5px 0;
    .load-more{
        display:block;
        width:278px;
        text-decoration:none
        text-align:center;
        height:35px;
        color:#787878;

        line-height:35px
        background:#f7f7f7;
    }
`
export const Loadmore = styled.div`
    width:100%;
    height:30px;
    background:#a5a5a5;
    margin-top:20px;
    border-radius:15px;
    color:#fff;
    text-align:center;
    line-height:30px;
    font-size:14px;
    cursor:pointer;
`
export const BackTop = styled.div`
    width:60px;
    height:60px;
    position:fixed;
    border:1px solid #777;
    right:65px;
    bottom:65px;
    font-size:14px;
    line-height:60px;
    text-align:center;
`